<template>
	<div class="tab border-bottom">
	  	<router-link tag="div" class="tab-item" to="/goods">
	  		<span class="tab-link">商品</span>
	  	</router-link>
	  	<router-link tag="div" class="tab-item" to="/ratings">
	  		<span class="tab-link">评价</span>
	  	</router-link>
	  	<router-link tag="div" class="tab-item" to="/sellers">
	  		<span class="tab-link">商家</span>
	  	</router-link>
	  </div>
</template>

<script>
	export default {
	  name: 'Tab'
	}
</script>

<style lang="stylus" scoped>
	@import '~common/stylus/varibles.styl'
	@import '~common/stylus/mixin.styl'
	
	.tab
	  display: flex
	  width: 100%
	  height: 40px
	  line-height: 40px
	  border-bottom(rgba(7,17,27,0.1))
	  .tab-item
	  	flex: 1
	  	text-align: center
	  	.tab-link
	  	  font-size: 14px
	  	  color: rgb(77,85,83)
	  	  display: block
	  	&.router-link-active
	  	  .tab-link
	  	  	color: $activeColor
</style>